<template>
  <div>
    <div class="input-group" v-for="(item,index) in list">
      <el-select :disabled="readOnly" filterable v-model="item.medId"
                 style="width: 35%">
        <el-option
          v-for="item in medicineList"
          :key="item.medId"
          :label="item.medName"
          :value="item.medId">
          <span style="float: left">{{ item.medName }}</span>
          <span style="float: right; color: #8492a6; font-size: 12px;margin-left: 10px">
          {{ item.marketPrice }}元/{{unit}}
        </span>
        </el-option>
      </el-select>
      <el-input :readonly="readOnly" @input="handelInput" v-model="item.medGram" placeholder="重量"
                style="width: 40%;margin:2.5px 5px">
        <template slot="append">{{unit}}</template>
      </el-input>
      <el-button v-show="!readOnly" @click="addInputGroup" type="primary" icon="el-icon-plus" size="mini"
                 circle/>
      <el-button v-show="list.length>1&&!readOnly" @click="removeInputGroup(item,index)" type="danger"
                 icon="el-icon-minus" size="mini" circle/>
    </div>
  </div>

</template>

<script>
  import { listMedicine } from '../../api/medicine/medicine'
  import { computePrice } from '../../api/medicine/prescription'

  export default {
    name: 'MedicineSelect',
    data() {
      return {
        medicineList: [],
        totalPrice: 9604.23
      }
    },
    props: {
      readOnly: {
        type: Boolean,
        default: false
      },
      list: {
        type: Array,
        default: []
      },
      amount:{
        type: Number,
        default: 1
      },
      unit: {
        type: String,
        default: '克'
      }
    },
    watch: {
      async list() {
        await this.getTotalPrice()
        this.$emit('listChange', this.list, this.totalPrice )
      },
      async amount() {
        await this.getTotalPrice()
        this.$emit('listChange', this.list, this.totalPrice )
      }
    },
    methods: {

      async getMedicineList() {
        this.medicineList = (await listMedicine()).rows
      },
      async handelInput() {
        await this.getTotalPrice()
        this.$emit('listChange', this.list, this.totalPrice)
      },
      addInputGroup() {
        this.list.push({ medId: '', medGram: '' })
      },
      removeInputGroup(item, index) {
        const medId = this.list[index].medId
        let medName = ''
        if (medId !== '') {
          this.medicineList.some(item => {
            if (item.medId === medId) {
              medName = ` [ ${item.medName} ] `
              return true
            }
          })
        }
        this.$confirm(`确定删除${medName}吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const list = this.list
          list.splice(index, 1)
        })
      },
      async getTotalPrice() {
        //todo 获取金额
        const medicineList = this.list.filter(item => {
          //未选择药品,未输入克数,输入不是数字的,不参与计算
          // && !item.medGram.endsWith(".") 表示以'.'结尾的不参与计算
          return item.medGram !== '' && !isNaN(Number(item.medGram)) && item.medId !== ''
        })
        if (medicineList.length > 0) {
          const data = { medicineList }
          data.amount = this.amount
          const res = await computePrice(data)
          this.totalPrice = Number(res.data)
        } else {
          this.totalPrice = 0
        }
      }

    },
    created() {
      this.getMedicineList()
    }
  }
</script>

<style scoped>

  @media only screen and (max-width: 767px) {


    .input-group {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      margin: 2px 0;
    }

    .el-select-dropdown__item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .price {
      position: absolute;
      left: 25px;
      bottom: 25px;
    }

    .el-button--mini.is-circle {
      padding: 4px;
    }
  }


</style>
